<template>
  <view class="content">
    <view style="display: flex;width: 100%;">
      <view>月份选择：</view>
      <picker style="flex: 1;" mode="date" fields="month" :value="selectMonth" @change="bindDateChange">
        <view>{{selectMonth}}</view>
      </picker>
    </view>
    <date-select-horizontal v-model="selectDate" @selectDate="getSelectDate" />
    <view>
      <view>选中的日期(返回值为date对象)：</view>
      <view>{{selectDate}}</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        selectMonth: '2024-06',
        selectDate: new Date('2024-06')
      }
    },
    onLoad() {

    },
    methods: {
      bindDateChange: function(e) {
        this.selectMonth = e.detail.value
        this.selectDate = new Date(this.selectMonth)
      },
      getSelectDate(date) {
        // 处理点什么
      }
    }
  }
</script>

<style>
  .content {

  }
</style>